<template>
	<view>
		<u-navbar
			:autoBack="true"
		>
			<view slot='center' class='nav-center'>
				{{ title }}
			</view>
			<view slot='right' class='nav-right'>
				<u-icon name="search" size='22' @click='search'></u-icon>
				<u-icon name="shopping-cart" size='22'></u-icon>
			</view>
		</u-navbar>
		<!--课程筛选-->
		<view class='filter'>
			<view v-for="item in filterList" :key='item.id'>
				<view 
					class='filter-item'
					:class='item.id == current?"active":""'
					@click='changeTabs(item.id)'
				>{{ item.name }}</view>
			</view>
		</view>
		<!--课程列表-->
		<view class='re-lo'>
			<scroll-view scroll-y="true" :style="'height:'+height+'px;'" @scrolltolower='lower'>
				<view class='new-list' v-if='courseList.length > 0'>
					<view 
						class='new-list-item'
						v-for='item in courseList'
						:key='item.id'
					>
						<view class='new-item-img'>
							<image :src="item.courseCover"></image>
						</view>
						<view class='new-item-main'>
							<view class='new-item-title'>{{ item.courseName }}</view>
							<view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
							<view class='new-item-total'>
								<view class='new-item-price' v-if='item.discountPrice==0'>
									<view>免费</view>
								</view>
								<view class='new-item-price' v-else>
									<view>限时优惠</view>
									<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
								</view>
								<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>暂无搜索课程...</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { searchCourse } from '@/api/course.js'
import { mixin } from '@/mixins/mixin.js'
export default{
	mixins:[ mixin ],
	data () {
		return {
			title:'',
			filterList:[
				{id:0,name:'综合'},
				{id:1,name:'最新课程'},
				{id:2,name:'浏览最多'}
			],
			current:0,
			courseList:[],
			height:0,
			courseParams:{
				pageNum:1,
				pageSize:10,
				entity:{
					sortBy:'',
					courseName:''
				}
			},
			isTabs:false
		}
	},
	onLoad( e ) {
		this.title = e.key;
		this.courseParams.entity.courseName = e.key;
		this.getCourse();
	},
	onReady() {
		this.height  = this.getHeight('.u-navbar--fixed','.filter') + 30;
	},
	methods:{
		changeTabs( id ){
			this.current = id;
			this.isTabs = true;
			this.courseParams.pageNum = 1;
			switch( id ){
				case 0:
					this.courseParams.entity.sortBy = '';
				break;
				case 1:
					this.courseParams.entity.sortBy = 'time-desc';
				break;
				case 2:
					this.courseParams.entity.sortBy = 'clicks-desc';
				break;
			}
			this.getCourse();
		},
		getCourse(){
			searchCourse(this.courseParams).then(res=>{
				if( this.isTabs ){
					this.courseList = res.pageInfo.list;
				}else{
					this.courseList = [...this.courseList,...res.pageInfo.list];
				}
			})
		},
		//触底事件
		lower(){
			this.isTabs = false;
			this.courseParams.pageNum++;
			this.getCourse();
		},
		//进入搜索页
		search(){
			uni.navigateTo({
				url:'/pages/search/search'
			})
		}
	}
}
</script>

<style>
.nav-center{
	font-size:38rpx;
}
.nav-right{
	display: flex;
}
.filter{
	display: flex;
	justify-content: space-between;
	padding-top:108rpx;
}
.filter-item{
	padding:0 33rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.filter-item.active{
	color: #0648FF;
	font-weight: 900;
}
.re-lo{
	padding:14rpx;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:40rpx;
}
.new-list-item:after{
	content: '';
	position: absolute;
	bottom:-20rpx;
	margin-top:40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.new-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left:23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #C5C5C5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	color: #FF4B5C;
	font-weight: 600;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left:21rpx;
}
/deep/ ::-webkit-scrollbar {
	display: block;
	width: 0px !important;
	height: 0px !important;
}
</style>